<template>
  <div id="stocks">
    <!-- 面包导航 -->
    <el-breadcrumb separator="/" style="padding-left:10px;padding-bottom:10px;font-size:12px;">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>数据统计</el-breadcrumb-item>
      <el-breadcrumb-item>个人业绩</el-breadcrumb-item>
    </el-breadcrumb>
    <el-row>
<!--      <el-col :span="14">-->
      <el-card class="box-card" style="width: 100%">
        <el-form :inline="true" :model="queryMap" align="center" class="demo-form-inline" label-width="70px">
          <el-form-item label="签订日期" label-width="80px">
            <el-date-picker
              :clearable="false"
              v-model="range"
              type="datetimerange"
              :value-format="'yyyy-MM-dd HH:mm:ss'"
              :picker-options="pickerOptions"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"
              align="right">
            </el-date-picker>
          </el-form-item>
          <el-form-item style="margin-left: 30px">
            <el-button icon="el-icon-refresh" @click="reset">重置</el-button>
            <el-button type="primary" icon="el-icon-search" @click="getStockList">查询</el-button>
          </el-form-item>
        </el-form>



        <div class="grid-content bg-purple-dark" style="margin-top: 30px">
<!--          <el-card class="box-card">-->
          <!-- 库存饼图 -->
          <div id="tianxing" style="width: 500px;height:350px; float:left; margin-left: 30px"></div>
          <div id="bingtu" style="width: 500px;height:225px; float:right; margin-right: 30px"></div>
            <!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->

<!--          </el-card>-->

        </div>
      </el-card>
<!--      </el-col>-->
    </el-row>
  </div>
</template>

<script>
import echarts from 'echarts'
import { getConList } from '../../api/con'
import { getCatList } from '@/api/category'

export default {
  name: 'Stock',
  data () {
    return {
      range: [],
      pickerOptions: {
        shortcuts: [
          {
            text: '最近一周',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {}, {
            text: '最近两个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 60)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick (picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
      },
      catetorys: [],
      cateories: [], //类别选择
      current: 1,
      size: 5,
      total: 0,
      searchSelectProps: {
        expandTrigger: 'hover',
        value: 'id',
        label: 'name',
        children: 'children',
        checkStrictly: true
      }, //级联搜索选择器配置项
      categorykeys: [],
      tableData: [],
      goods: {
        name: '',
        model:'',
        unit:''
      },
      queryMap: {
        username: '',
        staus: '',
        conNum: '',
        cusName: ''
      },
      xData: [],
      yData: [],
      legendData: [], //饼图存放物资名称
      selected: {}, //存放选择的数据
      seriesData: [{
        name: '',
        value: ''
      }] //饼图数据
    }
  },
  methods: {
    reset () {
      this.queryMap = {
        username: '',
        staus: '',
        conNum: '',
        cusName: ''
      }
      this.queryMap.startTime = null
      this.queryMap.endTime = null
      this.range = []
    },
    /**
     * 加载库存信息
     */
    async getStockList () {
      if (this.range != null && this.range.length === 1) {
        this.queryMap.startTime = this.range[0]
      } else if (this.range != null && this.range.length === 2) {
        this.queryMap.startTime = this.range[0]
        this.queryMap.endTime = this.range[1]
      }

      const res= await getConList(1,10,1,this.queryMap)
      console.log(res)
      if (res.code!=200) {
        return this.$message.error("获取合同列表失败");
      } else {
        this.total = res.data.total
        this.tableData = res.data.consList
        this.xData = []
        this.yData = []
        this.selected = {}
        const $this = this
        //构建表格条形统计图的数据
        this.tableData.forEach(function (e) {
          $this.xData.push(e.date)
          $this.yData.push(e.price)
        })
        //重新绘制表格
        this.draw()
        //饼图
        this.findAllProductStocks()
      }
    },
    /**
     * 绘制条形统计图
     */
    draw () {
      var myChart = echarts.init(document.getElementById('tianxing'))
      // 指定图表的配置项和数据
      var option = {
        title: {
          text: '销售额条形图'
        },
        toolbox: {
          show: true,
          feature: {
            dataZoom: {
              yAxisIndex: 'none'
            },
            dataView: { readOnly: false }, //  缩放
            magicType: { type: ['bar'] }, ///　　折线  直方图切换
            restore: {}, // 重置
            saveAsImage: {} // 导出图片
          }
        },
        tooltip: {},
        legend: {
          data: ['销售额量']
        },
        xAxis: {
          data: this.xData
        },
        yAxis: {},
        series: [
          {
            name: '库存量',
            type: 'bar',
            showBackground: true,
            data: this.yData,
            itemStyle: {
              normal: {
                //好，这里就是重头戏了，定义一个list，然后根据所以取得不同的值，这样就实现了，
                color: function (params) {
                  // build a color map as your need.
                  var colorList = [
                    '#0780cf ', '#fa6d1d ', '#ac2026 ', '#701866 ', '#d22e8d ',
                    '#FE8463', '#a195c5 ', '#FAD860', '#F3A43B', '#60C0DD',
                    '#D7504B', '#a195c5  ', '#F4E001', '#F0805A', '#63b2ee'
                  ]
                  return colorList[params.dataIndex]
                },
                //以下为是否显示，显示位置和显示格式的设置了
                label: {
                  show: true,
                  position: 'top',
//                             formatter: '{c}'
                  formatter: '{c}元'
                }
              }
            },
          },

        ]
      }

      // 使用刚指定的配置项和数据显示图表。
      myChart.setOption(option)
    },
    /**
     * 绘制饼图
     */
    drawRound () {
      var myChart = echarts.init(document.getElementById('bingtu'))
      var option = {
        title: {
          text: '客户占比图',

          left: 'left'
        },
        toolbox: {
          show: true,
          feature: {
            saveAsImage: {} // 导出图片
          }
        },
        tooltip: {
          trigger: 'item',
          formatter: '{b} : {c}元 ({d}%)'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: 10,
          top: 20,
          bottom: 20,
          data: this.legendData,
          selected: this.selected
        },
        series: [
          {
            name: '商品名称',
            type: 'pie',
            radius: '55%',
            center: ['40%', '50%'],
            data: this.seriesData,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      }
      myChart.setOption(option)
    },

    /**
     * 物资所有的库存信息
     */
    findAllProductStocks () {
        this.legendData = []
        this.selected = {}
        this.seriesData = [{}]
        var $this = this
        //构建饼图的数据对象
        this.tableData.forEach(function (e) {

          $this.legendData.push(e.cusName)
          $this.seriesData.push({
            name: e.cusName,
            value: e.price
          })
        })

        //重新绘制表格
        this.drawRound()

    },
  },
  created () {
    this.getStockList()
  },
}
</script>
